<template>
  <!-- <client-only> -->
  <MainLayout :maxwidth="false" startColor="2">
    <v-breadcrumbs :items="['Foo', 'Bar', 'Fizz']" class="text-4 font-avenir! next-lg"></v-breadcrumbs>
    <LayoutCol :isMaxWidth="false" :style="{ maxWidth: '1500px' }">
      <Advertisement :images="PageData?.banners ?? []" :btnText="PageData?.advertise_button_title ?? ''"
        :btnLink="PageData?.advertise_button_url ?? ''" :title="PageData?.advertise_start_title ?? ''"
        :content="PageData?.advertise_start_describeribe ?? ''"
        :advertise="PageData?.advertise?.map(l => l.value) ?? []" />
    </LayoutCol>
    <LayoutCol :style="{
      maxWidth: '1500px'
    }">
      <Title :content="PageData?.register_describeribe" class="md:px-4 my-4 md:pt-6!">
        <template #title>
          <h1 class="text-xl md:text-[32px]">
            {{ PageData?.register_title }}
          </h1>
        </template>
        <template #contentBottom>
          <EvaluateOther :content="PageData?.quotation_describeribe" />
        </template>
      </Title>
      <v-row ow class="next-lg mx-auto!">
        <v-col cols="12" sm="12" md="6">
          <div class="md:px-4 md:pb-13 sticky top-2 md:w-[90%] ml-auto!">
            <Swiper :list="PageData?.formbanners ?? []" :showBtn="false" showArrow leftTabs :defaultAction="false" />
            <Title content="" class="my-[20px] bg-white px-4 py-2 md:mt-4">
              <template #title>
                <div class="text-[20px]! text-left!">
                  {{ PageData?.register_left_title }}
                </div>
              </template>
              <template #content>
                <div class="text-left!">
                  {{ PageData?.register_left_describeribe }}
                </div>
              </template>

            </Title>
            <div>
              <!-- <ul
                class="mt-5 text-[14px] md:text-[15px] text-left! text-black grid! grid-cols-1! md:grid-cols-2! gap-2!"> -->
              <ul class="mt-5 text-[14px] md:text-[15px] text-left! text-black bg-white px-4 py-2">
                <li class="list-inside-black mb-1" v-for="item in PageData?.quotation_content ?? []">{{ item.value }}
                </li>
              </ul>
            </div>
          </div>
        </v-col>
        <v-col cols="12" sm="12" md="6">
          <ShippingForm :register_title="PageData?.register_right_title"
            :register_foot_title="PageData?.register_right_foot_title"
            :register_foot_describeribe="PageData?.register_right_foot_describeribe"
            :register_foot_email="PageData?.register_right_foot_mail"
            :register_foot_phone="PageData?.register_right_foot_tel" />
        </v-col>
      </v-row>
    </LayoutCol>
    <LayoutCol class="md:py-5!">
      <img :src="PageData?.formfootbanners" class="w-[100%] block mx-auto!" />
    </LayoutCol>
    <LayoutCol :style="{ maxWidth: '950px!important' }">
      <div class="w-full ">
        <v-row no-gutters class="text-left">
          <v-col cols="12" sm="12" md="5">
            <div class="flex flex-row justify-end!">
              <img :src="PageData?.contact_us_img?.[0]" class="mx-auto block mb-2" v-img-auto="'10/10'" :style="{
                width: height1 + 'px !important',
                height: height1 + 'px !important',
              }" />
            </div>
          </v-col>
          <v-col cols="12" sm="12" md="7">
            <div class="md:px-4" ref="register_right_foot">
              <v-card class="px-3! py-7! font-avenir! text-center!">
                <div class="flex mb-2">
                  <img :src="PageData?.contact_us_thumbnail?.[0]" alt="" srcset="" class="w-12 h-12 mr-2" />
                  <div class="text-3 text-gray-600 md:text-[14px]!">
                    <h1 class="inline-bold text-3 md:text-[14px]!">
                      {{ PageData?.contact_us_title }}
                    </h1>
                    {{ PageData?.contact_us_describeribe }}
                  </div>
                </div>

                <v-btn elevation="0" color="#39c464" class="text-white! w-full! mb-2"
                  :href="PageData?.contact_us_button_describeribe" target="_blank">
                  {{ PageData?.contact_us_button_title }}
                </v-btn>
                <v-row no-gutters class="text-3! md:text-[14px]! mb-2 font-avenir!">
                  <v-col cols="7" sm="7">
                    Email: {{ PageData?.contact_us_email }}
                  </v-col>
                  <v-col cols="5" sm="5" class="text-right md:text-[14px]!">
                    Call: {{ PageData?.contact_us_call }}
                  </v-col>
                </v-row>
                <v-row no-gutters class="text-2.5! font-avenir!">
                  <v-col cols="7" sm="7" class="flex items-center!">
                    <span class="mr-[2px] md:text-[14px]!">Excellent:</span>
                    <Start />
                  </v-col>
                  <v-col cols="5" sm="5" class="text-right ">
                    <div class="flex items-center! justify-end! md:text-[14px]!">
                      4.9 out of 5
                      <Icons name="icon-trustpilot_" class="w-[15px] h-[15px] relative -top-[2px] ml-[5px]" />
                      Turstpilot
                    </div>
                  </v-col>
                </v-row>
              </v-card>
              <div class="py-2!"></div>
              <v-card class="px-3! py-7! font-avenir! text-left!">
                <div class="flex mb-2!">
                  <img :src="PageData?.contact_us_foot_img?.[0]" alt="" srcset="" class="w-24! h-24! mr-2" />
                  <div class="flex-1 w-0">
                    <p class="inline-bold text-3 md:text-[16px]!  text-gray-600 ">
                      {{ PageData?.contact_us_foot_title }}
                    </p>
                    <p class="text-2 md:text-[10px]! text-gray-400">
                      {{ PageData?.contact_us_foot_describeribe }}
                    </p>
                  </div>
                </div>
                <v-btn elevation="0" color="#1C498B" class="w-full! font-avenir!"
                  :href="PageData?.contact_us_foot_button_describeribe" target="_blank">
                  {{ PageData?.contact_us_foot_button_title }}
                </v-btn>
              </v-card>
            </div>
          </v-col>
        </v-row>
      </div>


    </LayoutCol>
    <LayoutCol>
      <Title :title="PageData?.foot_title" :content="PageData?.foot_describeribe" class="mb-20px">
      </Title>
      <div class="flex flex-row flex-wrap justify-center mb-20px">
        <div class="w-1/2 md:w-1/4 text-center py-2 p-2" :class="{
          'pr-[6px]': i % 2 !== 0,
          'pl-[6px]': i % 2 === 0,
          'md:w-1/5!': 1,
        }" v-for="(item, i) in PageData?.foot_content ?? []">
          <div class="w-full h-full">
            <a class="cms-link-wrapper h-full flex flex-col">
              <div class="cms-img relative w-full">
                <div class="image-content relative flex items-center justify-center">
                  <img :src="item.fileList?.[0] || ''" class="w-[50%]!" v-img-auto="'1/1'" v-hover-pop />
                </div>
              </div>
              <div class="w-[85%]! mx-auto! ">
                <div class="text-[14px] font-bold mt-10px">{{ item.title }}</div>
                <div class="text-[13px] text-[#999] mt-10px">{{ item.value }}</div>
              </div>
            </a>
          </div>
        </div>
      </div>

      <Title :title="PageData?.evaluate_title" :content="PageData?.evaluate_describeribe">
        <template #contentBottom>
          <EvaluateOther :content="PageData?.evaluate_total_describeribe" />
        </template>
      </Title>
      <!-- 评论 -->
      <Evaluate :list="PageData?.customizable_skus ?? []" />
    </LayoutCol>
    <LayoutCol>
      <Imgs :num="4" :list="PageData?.patch_display_content ?? []" :imgAuto="false"
        :title="PageData?.patch_display_title" :content="PageData?.patch_display_describeribe" />
      <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!"
        :href="PageData?.patch_display_button_url" target="_blank">
        {{ PageData?.patch_display_button_title }}
      </v-btn>
    </LayoutCol>
    <LayoutCol>
      <Imgs :num="4" :list="PageData?.clothing_patches_content ?? []" :imgAuto="false"
        :title="PageData?.clothing_patches_title" :content="PageData?.clothing_patches_describeribe" />
      <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!"
        :href="PageData?.patch_display_button_url" target="_blank">
        {{ PageData?.patch_display_button_title }}
      </v-btn>
    </LayoutCol>

    <LayoutCol>
      <WallDiagram :title="PageData?.clothing_patches_title" :content="PageData?.quality_describeribe"
        :buttonText="PageData?.quality_button_title" :url="PageData?.qualitybanners?.[0]"
        :pageUrl="PageData?.quality_button_describeribe" />
    </LayoutCol>

    <LayoutCol>
      <v-row>
        <v-col cols="14" sm="14" md="7">
          <img :src="PageData?.creativitybanners?.[0] || ''" class="w-[100%] mt-4" />
        </v-col>
        <v-col cols="14" sm="10" md="5" class="flex items-center justify-center">
          <div class="text-center md:w-[400px]!">
            <Title :title="PageData?.creativity_title ?? ''">
              <template #content>
                {{ PageData?.creativity_describeribe }}
                <div class="mt-5">
                  {{ PageData?.creativity_content ?? '' }}
                </div>
                <div>
                  <ul class="mt-5 text-[14px] md:text-[14px] text-left! ">
                    <li class="list-inside-red mb-1" v-for="item in PageData?.creativitys ?? []">
                      {{ item.value }}
                    </li>
                  </ul>
                </div>
              </template>
            </Title>
            <v-btn elevation="0" color="#1C498B" class="w-full! max-w-[400px]! mt-4 font-avenir!">
              {{ PageData?.creativity_button_title }}
            </v-btn>
          </div>
        </v-col>
      </v-row>
    </LayoutCol>

    <LayoutCol>
      <ImgSwiper :list="PageData?.product_content ?? []" :title="PageData?.product_title"
        :content="PageData?.product_describeribe" :btnText="PageData?.product_button_title"
        :btnUrl="PageData?.product_button_url">
        <!-- <Imgs :num="6" :colNum="3" :showContent="false" :imgAuto="'10/9'" /> -->
      </ImgSwiper>
    </LayoutCol>

    <LayoutCol>
      <Imgs :num="4" :list="PageData?.product_content ?? []" :title="PageData?.design_title"
        :content="PageData?.design_describeribe" />

      <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!"
        :href="PageData?.design_button_url" target="_blank">
        {{ PageData?.design_button_title }}
      </v-btn>
    </LayoutCol>

    <LayoutCol>
      <Title class="md:hidden!" :title="PageData?.backing_title" :content="PageData?.backing_describeribe" />
      <ImgSwiper class="mt-4" type="2" :list="PageData?.backing_content ?? []" :btnText="PageData?.backing_button_title"
        :btnUrl="PageData?.backing_button_url">
      </ImgSwiper>
    </LayoutCol>

    <LayoutCol>
      <Imgs :num="8" :colNum="4" :showContent="false" :imgAuto="'10/10'" :list="PageData?.hd_detail_content ?? []"
        :title="PageData?.hd_detail_title" :content="PageData?.hd_detail_describeribe">
        <template #content="{ item }">
          <p class="text-sm font-bold mt-2">{{ item?.title }}</p>
        </template>
      </Imgs>
      <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]! mx-auto!"
        :href="PageData?.hd_detail_button_url" target="_blank">
        {{ PageData?.hd_detail_button_title }}
      </v-btn>
    </LayoutCol>

    <LayoutCol>
      <Swiper :list="['', '', '']" height="auto" :type="'1'" :showBtn="true" :defaultAction="false">
        <Imgs :num="6" :colNum="3" :showContent="false" :imgAuto="'10/9'" :list="PageData?.gallery_images ?? []" />
      </Swiper>
    </LayoutCol>
    <LayoutCol>
      <Panels :title="PageData?.borders_edges_title" :list="PageData?.question_info_skus ?? []" />
    </LayoutCol>
    <LayoutCol :style="{ maxWidth: '900px!important' }">
      <div class="w-full ">
        <v-row no-gutters class="text-left">
          <v-col cols="12" sm="12" md="4">
            <div class="flex flex-row justify-end!">
              <img
                src="https://nicecustomize.oss-us-west-1.aliyuncs.com/img/6846514379846560db54e2c573e4de140e1c9586.webp"
                class="mx-auto block mb-2" v-img-auto="'10/10'" :style="{
                  width: height2 + 'px!important',
                  height: height2 + 'px!important',
                }" />
            </div>
          </v-col>
          <v-col cols="12" sm="12" md="8" class="flex justify-center items-center!">
            <div class="md:px-4" ref="register_right_aaaa">
              <v-card class="px-3! py-3! font-avenir! text-left!">
                <v-row no-gutters class="text-left">
                  <v-col cols="12" sm="12" md="5" class=" md:pr-4!">
                    <img
                      src="https://nicecustomize.oss-us-west-1.aliyuncs.com/img/6846514379846560db54e2c573e4de140e1c9586.webp"
                      class="w-full! mx-auto block mb-2" v-img-auto="'10/10'" />
                  </v-col>
                  <v-col cols="12" sm="12" md="7">
                    <p class="inline-bold text-3 md:text-25px!">
                      Have questions aboutyour patch order?
                    </p>
                    <p class="text-2 md:text-[12px]! my-2">
                      fyou have any questions about embroideredpatches, we're here for you. Ordering online is
                      easyfrom
                      design to delivery our team will support youevery step of the way.
                    </p>
                  </v-col>
                </v-row>
                <v-btn elevation="0" color="#39c464" class="w-full! mb-4 font-avenir! text-white">
                  GET A FREE QUQTE
                </v-btn>
                <v-row no-gutters class="text-3! md:text-[12px]! mb-2 font-avenir!">
                  <v-col cols="7" sm="7">
                    Email: {{ PageData?.register_right_foot_mail }}
                  </v-col>
                  <v-col cols="5" sm="5" class="text-right">
                    Call: {{ PageData?.register_right_foot_tel }}
                  </v-col>
                </v-row>
              </v-card>
            </div>
          </v-col>
        </v-row>
      </div>
    </LayoutCol>
  </MainLayout>
</template>

<script setup lang="ts">
import { Title } from '~/components/Title/index'
import { Swiper } from '~/components/swiper/index'
import ImgSwiper from '~/components/swiper/imgSwiper.vue'
import { Evaluate } from '~/components/evaluate'
import { WallDiagram } from '~/components/wallDiagram'
import { Panels } from '~/components/panels'
import { Advertisement } from '~/components/Advertisement'
import EvaluateOther from '~/components/evaluate/evaluateOther.vue'
import Imgs from '~/components/swiper/imgs.vue'
import { ShippingForm } from '~/components/ShippingForm'
import { MainLayout } from '~/components/MainLayout'
import LayoutCol from '~/components/MainLayout/layoutCol.vue'
import { getNewProjuctinfo } from '~/composables/api/new_projuct'
import { useRoute } from 'vue-router'
import { Start } from '~/components/start'
import { Icons } from '~/components/icons'
const route = useRoute();
console.log('route.query', route.query);
console.log('route.query.id', route.query.id);
const relustData = await getNewProjuctinfo(route.query.id as string);
const PageData = ref(relustData.value?.page_data);
console.log('relustDatarelustData', relustData.value);
const register_right_foot = ref();
const register_right_aaaa = ref();
const height1 = ref(0);
const height2 = ref(0);
useHead({
  title: relustData.value?.title, // 页面标题
  // 还可以配置其他元信息（如描述、关键词等）
  meta: [
    { name: relustData.value?.keywords, content: relustData.value?.describe },
  ]
})
const swiperList = [
  'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
  'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
  'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
  'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
  'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
  'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
  'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
  'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
  'https://media.thestudio.com/7749/Velcro_Hook_FINAL_1.png.webp',
]
onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      height1.value = register_right_foot.value?.clientHeight;
      height2.value = register_right_aaaa.value?.clientHeight;
    }, 1000);
  })
})
</script>

<style lang="scss" scoped>
:deep(.v-filed-active) {
  border: none !important;
}

:deep(.v-img__img--contain) {
  object-fit: none !important;
}

.decoration-dotted {
  text-decoration: line-through;
}
</style>